<template>
    <div>
        <Bread title="Chance / Customer Handover"/>


        <ViewCustomerDialog :options="options"
                            :visible="viewCustomerVisible"
                            ref="ViewCustomerDialog"
                            :on-close="closeViewCustomer">
        </ViewCustomerDialog>
        <div style="width: 1600px;height: 750px;display: flex;align-items: center;justify-content: center">
            <div class="card">
                <div style="text-align: left;font-size: 20px;margin-bottom: 20px;margin-left: 20px">
                    Remove
                </div>
                <el-form ref="searchCustomerForm" :model="formInline" :rules="rules"
                         size="mini" label-width="100px"
                         label-position="left">
                    <el-row type="flex" justify="start" align="top">
                        <el-form-item size="mini" label-width="160px" label="Sales Department:" prop="customerMgrDept">
                            <el-select size="small"
                                       v-model="formInline.customerMgrDept"
                                       placeholder="Please choose sales department"
                                       clearable
                                       filterable>
                                <el-option v-for="(item, index) in options.customerMgrDeptOptions"
                                           :key="index"
                                           :label="item.label"
                                           :value="item.value" :disabled="item.disabled"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-row>
                    <el-row type="flex" justify="start" align="top">
                        <el-form-item size="mini" label-width="170px" label="  Customer Manager:"
                                      prop="customerMgrName">
                            <el-select size="small"
                                       v-model="formInline.customerMgrName"
                                       placeholder="Please choose customer manager"
                                       clearable
                                       filterable>
                                <el-option v-for="(item, index) in customerMgrNameOptions"
                                           :key="index"
                                           :label="item.label"
                                           :value="item.value" :disabled="item.disabled"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-row>
                    <el-row type="flex" justify="start" align="top">
                        <el-col span="16">
                            <el-form-item size="mini" label-width="150px" label="Customer Name:" prop="customerName">
                                <el-input size="small" style="width: 250px" v-model="formInline.customerName"
                                          placeholder="Please input customer name"
                                          clearable>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col span="8">
                            <el-form-item>
                                <el-button size="small" icon="el-icon-search"
                                           class="p-button"
                                           type="primary" @click="search"> Search
                                </el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div style="text-align: left;font-size: 20px;margin-bottom: 20px;margin-top: 20px;margin-left: 20px">
                    Customer info
                </div>
                <el-table
                    v-loading="this.$store.getters.isLoading"
                    ref="multipleTable"
                    :data="waitCustomerData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    height="200px"
                    fixed
                    @selection-change="handleSelectionChange1"
                >
                    <el-table-column
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column
                        prop="customerId"
                        label="customerId"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="customerName"
                        label="customerName"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                        label="Operation"
                    >
                        <template slot-scope="scope">
                            <el-button
                                type="primary"
                                circle
                                size="mini"
                                icon="el-icon-view"
                                @click="openViewCustomer(scope.$index, scope.row)">
                            </el-button>
                            <el-button
                                type="primary"
                                circle
                                size="mini"
                                icon="el-icon-search"
                                @click="handleSelect(scope.$index, scope.row)">
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="text-align: left;font-size: 20px;margin-bottom: 20px;margin-top: 20px;margin-left: 20px">
                    Chance info
                </div>
                <el-table
                    ref="multipleTable"
                    :data="waitChanceData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange2">
                    <el-table-column
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column
                        label="Chance Id"
                    >
                        <template slot-scope="scope">{{ scope.row.chanceId }}</template>
                    </el-table-column>
                    <el-table-column
                        prop="chanceName"
                        label="Chance Name"
                    >
                    </el-table-column>

                </el-table>


            </div>
            <div style="width: 150px;display: flex;flex-direction: column;align-items: center;justify-content: center">
                <el-button @click="exchangeFromLeftToRight" style="font-size:36px;width: 100px;height: 66px"
                           type="primary" class="p-button"
                           icon="el-icon-arrow-right"></el-button>

            </div>
            <div class="card">
                <div style="text-align: left;font-size: 20px;margin-bottom: 20px;margin-left: 20px">
                    Receive
                </div>
                <el-form ref="formInline2"
                         :model="formInline2"
                         :rules="formInline2Rules"
                         style="margin-left: 50px">
                    <el-row type="flex" justify="start" align="top">

                        <el-form-item label-width="100px" label="Dept" prop="customerMgrDept">
                            <el-select size="small"
                                       :style="{width: '100%'}"
                                       v-model="formInline2.customerMgrDept"
                                       placeholder="Please choose dept">
                                <el-option v-for="(item, index) in options.customerMgrDeptOptions"
                                           :key="index"
                                           :label="item.label"
                                           :value="item.value"
                                           :disabled="item.disabled"></el-option>
                            </el-select>
                        </el-form-item>

                    </el-row>
                    <el-row type="flex" justify="start" align="top">
                        <el-form-item
                            label-width="100px"
                            label="Manager" prop="customerMgrName">
                            <el-select size="small"
                                       style="{width: 300px}"
                                       v-model="formInline2.customerMgrName"
                                       placeholder="Please choose customer manager">
                                <el-option v-for="(item, index) in customerMgrNameOptions"
                                           :key="index"
                                           :label="item.label"
                                           :value="item.value"
                                           :disabled="item.disabled"></el-option>
                            </el-select>
                        </el-form-item>

                    </el-row>
                </el-form>
                <div style="text-align: left;font-size: 20px;margin-bottom: 20px;margin-top: 20px;margin-left: 20px">
                    Customer info
                </div>
                <el-table
                    ref="multipleTable"
                    :data="doneCustomerData"
                    tooltip-effect="dark"
                    height="100"
                    max-height="200"
                    style="width: 100%;"
                    @selection-change="handleSelectionChange3">
                    <el-table-column
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column
                        label="Customer Id"
                    >
                        <template slot-scope="scope">{{ scope.row.customerId }}</template>
                    </el-table-column>
                    <el-table-column
                        prop="customerName"
                        label="Customer Name"
                        show-overflow-tooltip
                    >
                    </el-table-column>

                </el-table>
                <div style="text-align: left;font-size: 20px;margin-bottom: 20px;margin-top: 20px;margin-left: 20px">
                    Chance info
                </div>
                <el-table
                    ref="multipleTable"
                    :data="doneChanceData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    max-height="200"
                    @selection-change="handleSelectionChange4">
                    <el-table-column
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column
                        label="Chance Id"
                    >
                        <template slot-scope="scope">{{ scope.row.chanceId }}</template>
                    </el-table-column>
                    <el-table-column
                        prop="chanceName"
                        label="Chance Name"
                    >
                    </el-table-column>

                </el-table>


            </div>

        </div>
    </div>
</template>

<script>
import Bread from "@/components/Bread/Bread";
import {options} from "@/data/const";
import ViewCustomerDialog from "@/views/NPMS/Customer/CustomerManage/Dialog/ViewCustomerDialog";

export default {
    name: "Handover",
    components: {Bread, ViewCustomerDialog},
    data() {
        return {
            formInline: {
                customerName: '',
                customerMgrDept: '',
                customerMgrName: ''
            },
            formInline2: {
                customerMgrDept: '',
                customerMgrName: ''
            },

            formInline2Rules: {
                customerMgrName: [{
                    required: true,
                    message: 'Please choose customerMgrName',
                    trigger: 'change'
                }],
                customerMgrDept: [{
                    required: true,
                    message: 'Please choose customerMgrDept',
                    trigger: 'change'
                }],
            },
            waitCustomerData: [],
            waitChanceData: [
                {
                    chanceId: 2021001,
                    chanceName: "tom chance"
                },
                {
                    chanceId: 2021002,
                    chanceName: "neu chance"
                },
            ],
            doneCustomerData: [],
            doneChanceData: [],
            multipleSelection1: [],
            multipleSelection2: [],
            multipleSelection3: [],
            multipleSelection4: [],
            options: options,
            customerMgrNameOptions: [],
            viewCustomerVisible: false
        }
    },
    mounted() {
        this.$axios.get('/user/getAllCustomerManager').then(e => {
            console.log(e)
            var users = e.data.data
            var options = this.usersToOptions(users)
            this.customerMgrNameOptions = options
        })
        this.$axios.post(
            '/customer/customer/queryAllCustomer'
        ).then(res => {
            this.waitCustomerData = res.data.obj
            console.log(res.data.obj)
        });
    },
    methods: {
        usersToOptions(users) {
            var list = []
            users.forEach(item => {
                var ii = {
                    label: `[${item.userId}]${item.userName}`,
                    value: item.userName
                }
                list.push(ii)
            })
            return list
        },
        handleSelect(index, row) {
            this.$axios.post(
                '/chance/chance/getChanceByCustomer',
                row
            ).then(res => {
                this.waitChanceData = res.data.obj
            });
        },
        handleSelectionChange1(val) {
            console.log(val)
            this.multipleSelection1 = val;
        },
        handleSelectionChange2(val) {
            this.multipleSelection2 = val;
        },
        handleSelectionChange3(val) {
            this.multipleSelection3 = val;
        },
        handleSelectionChange4(val) {
            this.multipleSelection4 = val;
        },
        exchangeFromLeftToRight() {
            this.$refs['formInline2'].validate(valid => {
                if (!valid) {
                    this.$message.error("Handover failed!")
                    return
                } else {
                    let that = this;
                    let info = JSON.parse(JSON.stringify(that.waitCustomerData))
                    info.forEach((item, index) => {
                        //查找是否在选择列表内
                        that.multipleSelection1.forEach(se => {
                            if (se.customerId === item.customerId) {
                                that.doneCustomerData.push(item)
                                delete info[index]
                            }
                        })
                    })
                    info = info.filter(function (val) {
                        return val
                    }) //过滤undefined
                    that.waitCustomerData = info

                    this.multipleSelection2.forEach(i => {
                        this.waitChanceData = this.waitChanceData.filter(ii => i.chanceId === ii.chanceId)
                        this.doneChanceData.push(i)
                    })
                    this.submit()
                }


            })


        },
        openViewCustomer(index, row) {
            var dd = JSON.parse(JSON.stringify(row))
            console.log('ssssssss111',dd)
            dd.customerCity = JSON.parse(dd.customerCity)
            this.$refs.ViewCustomerDialog.setDataa(dd)
            this.$refs.ViewCustomerDialog.loadCustomerContacts(row)
            this.$refs.ViewCustomerDialog.loadCustomerRelationship(row)
            console.log(index, row);
            this.viewCustomerVisible = true
        },
        closeViewCustomer(){
            this.viewCustomerVisible = false
        },

        submit() {

            for (var a = 0; a < this.doneCustomerData.length; a++) {
                var customer = this.doneCustomerData[a]
                var deptRemove = customer.customerMgrDept
                var mgrRemove = customer.customerMgrName
                customer.customerMgrName = this.formInline2.customerMgrName
                customer.customerMgrDept = this.formInline2.customerMgrDept
                this.$axios.post(
                    '/customer/customer/updateCustomer',
                    customer
                ).then(res => {
                    console.log("customer", res)
                });
            }

            for (var i = 0; i < this.doneChanceData.length; i++) {
                var chance = this.doneChanceData[i]
                chance.customerMgrDept = this.formInline2.customerMgrDept
                chance.customerMgrName = this.formInline2.customerMgrName
                this.$axios.post(
                    '/chance/chance/updateChance',
                    chance
                ).then(res => {
                    console.log("chance", res)
                });
                var handover = {
                    handoverId: null,
                    deptRemove: deptRemove,
                    deptReceive: this.formInline2.customerMgrDept,
                    mgrRemove: mgrRemove,
                    mgrReceive: this.formInline2.customerMgrName,
                    customerId: customer.customerId,
                    customerName: customer.customerName,
                    chanceId: chance.chanceId,
                    chanceName: chance.chanceName
                }
                this.$axios.post(
                    '/handover/customerHandover/addCustomerHandover',
                    handover
                ).then(res => {
                    console.log("handover", res)
                })
            }
            this.$message.success("Handover success！")

        },
        search() {
            this.$refs['searchCustomerForm'].validate(valid => {
                if (!valid) return
                this.formInline.enterpriseProperty = null
                this.formInline.customerId = null
                var data = JSON.parse(JSON.stringify(this.formInline))
                this.$axios.post(
                    '/customer/customer/query',
                    data
                ).then(res => {
                    this.waitCustomerData = res.data.obj
                });
            })

        }
    }
}
</script>

<style scoped>
.card {
    width: 600px;
    height: 700px;
    line-height: 20px;
    border-radius: 30px 30px 30px 30px;
    background-color: rgba(255, 255, 255, 100);
    text-align: center;
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow-y: auto;

}
</style>